<template>
  <!-- 容器 -->
  <div class="charts" ref="charts"></div>
</template>

<script>
//引入echarts
import echarts from "echarts";
import {mapState} from 'vuex';
export default { 
  name: "BarChart",
  data() {
    return {
      lineCharts: null,
    }
  },
  mounted() { 
    //初始化echarts实例
    this.lineCharts =  echarts.init(this.$refs.charts);
    //配置数据
    this.lineCharts.setOption({
       xAxis:{
        //隐藏x轴
        show:false,
        //均分
        type:'category'
       },
       yAxis:{
        //隐藏y轴
        show:false
       },
       //系列
       series:[
        {
          //图表的形式
            type:'bar',
            data:[],
            color:'#5170c8'
         }
       ], 
       //布局调试
       grid:{
        left:0,
        top:0,
        right:0,
        bottom:0
       },
       tooltip:{}
    })
  },
  computed:{
    ...mapState({
      payTrend:state=>state.home.list.payTrend
    })
  },
  watch:{
    payTrend(){
    this.lineCharts.setOption({
       //系列
       series:[
        {
            data:this.payTrend,
         }
       ], 
    })
    }
  }
};
</script>

<style>
.charts {
  width: 100%;
  height: 100%;
}
</style>